<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Browsing History</title>
    <style>
        {{COMMON_CSS}}
        
        .container {
            max-width: 900px;
        }
        
        .clear-button {
            position: absolute;
            right: 12px;
            background: none;
            border: none;
            color: var(--secondary-text);
            font-size: 20px;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }
        
        .clear-button:hover {
            background: var(--border-color);
            color: var(--text-color);
        }
        
        .history-container {
            min-height: 400px;
        }
        
        .date-section {
            margin-bottom: 32px;
        }
        
        .date-header {
            font-size: 20px;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 2px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .date-header::before {
            content: "";
            width: 4px;
            height: 20px;
            background: linear-gradient(135deg, var(--accent-color), #5ac8fa);
            border-radius: 2px;
        }
        
        .entries-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        
        
        
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="header-content">
                <h1>📚 <span class="title-text">Browsing History</span></h1>
                <p>View and manage your browsing history</p>
            </div>
            <div class="header-actions">
                <button class="button small danger" onclick="clearAllHistory()">Clear All History</button>
            </div>
        </div>
        
        <div class="search-container">
            <div class="search-input-wrapper">
                <div class="search-icon">🔍</div>
                <input type="text" 
                       id="searchInput" 
                       class="search-input" 
                       placeholder="Search your browsing history…" 
                       autocomplete="off">
                <button class="clear-button" onclick="clearSearch()" title="Clear search">×</button>
            </div>
        </div>
        
        <div id="historyContainer" class="history-container">
            <!-- History entries will be populated here -->
        </div>
        
        <div class="loading-indicator" id="loadingIndicator">
            <div class="loading-spinner"></div>
            Loading history...
        </div>
        
        <div class="load-more-container">
            <button id="loadMoreButton" class="load-more-button" onclick="loadMore()" style="display: none;">
                Load More
            </button>
        </div>
    </div>
    
    <script>
        {{HISTORY_SCRIPT}}
    </script>
</body>
</html>
